$orange:#D78123;
$blue:#1E1641;
$green:#02d330;
$grey: #999;
$red: #d32327;

@mixin button($color){
  background:$color;
  border: 2px solid darken($color,15%);
  cursor: pointer;
  color: #fff;
  width: 150px;
  margin-left:4px;
}

.button{
  @include button($orange);
}

.grey_button{
  @include button($grey);
}

.red_button{
  @include button($red);
}

h1.logo{
    font-family: helvetica,arial,sans-serif;
    font-size: 24px;
    padding: 64px 0 0;
    margin: 0 auto;
    text-transform: uppercase;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.3em;
    background: transparent url(/logo.png) 50% 0 no-repeat;
}

.completed{
    text-decoration: line-through;
}

.tasks{
    padding:0;
    list-style:none;
}

.task{
    position:relative;
    padding:2px 0 2px 65px;
    border-bottom: dotted 1px #ccc;
}

form.update{
    position:absolute;
    bottom:2px;
    left:0;
    span{
      font-size: 10px;
    }
}
form.update input{
    background:white;
    padding:0 2px;
    border:solid 1px gray;
    cursor:pointer;
}

.tasks li.completed form.update input{
    color:#47FD6B;
}

form.delete{
    display:inline;
    .delete{
      color: $red;
    }
}

form.delete input{
    background:none;
    cursor:pointer;
    border:none;
}
.lists{
    padding:0;
    list-style:none;
    overflow:hidden;
}

.list{
    float: left;
    width:23%;
    margin:0 1%;
    border-top:solid 5px #ccc;
    h1{
      color: $orange;
    }
}